<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .middleBox {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
        }

        .middleBox img {
            width: 400px;
            height: 400px;
        }

        .shade {
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
            display: none;
        }

        .smallBox {
            margin-top: 10px;

        }

        .smallBox img {
            border: 1px solid #000;
            margin-left: 5px;
            width: 50px;
            height: 50px;
        }

        .smallBox img.active {
            border-color: red;
        }

        .box {
            /* border: 1px solid red; */
            margin: 50px;
            width: 402px;
            position: relative;
            /* background: red; */
        }

        .bigBox {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: absolute;
            top: 0;
            left: 105%;
            display: none;
            background-image: url(../day15DOM对象/images/1.jpg);
            background-position: 0 0;
            background-size: 1600px 1600px;
            background-repeat: no-repeat;
        }

        .shade:hover {
            cursor: zoom-in;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="middleBox">
            <img src="../day15DOM对象/images/1.jpg" width="400" height="400">
            <div class="shade"></div>
        </div>
        <div class="smallBox">
            <img class="active" src="../day15DOM对象/images/1-small.jpg">
            <img src="../day15DOM对象/images/2-small.jpg" alt="">
        </div>
        <div class="bigBox"></div>
    </div>
</body>

</html>
<script>
    //获取常用的dom对象
    const boxDom = document.querySelector(".box");
    const middleBoxDom = document.querySelector(".middleBox");
    const smallBoxImgDom = document.querySelectorAll(".smallBox>img");
    const bigBoxDom = document.querySelector(".bigBox");
    const shadeDom = document.querySelector(".shade");
    //实现点击小图修改大图
    smallBoxImgDom.forEach(item => {
        //给每个小图绑定点击事件
        item.onclick = function () {
            //实现被点击显示红色边框，就是给当前点击图片加"active"
            smallBoxImgDom.forEach(dom => dom.className = "");
            this.className = "active";
            //修改中图
            middleBoxDom.querySelector("img").src = this.src;
            //修改大图
            bigBoxDom.style.backgroundImage = `url(${this.src}) `
        }
    })
    //鼠标划入事件
    middleBoxDom.onmouseover = function () {
        //显示遮罩
        shadeDom.style.display = "block";
        //鼠标划入后事件开始生效
        middleBoxDom.onmousemove = function (event) {
            // offsetX/Y 获取坐标点相对于元素的位置,在移动过程中 事件源可能是img标签也可能是遮罩 导致所取出来的xy值错误的，最终导致抖动
            let x = event.clientX;
            let y = event.clientY;
            //获取遮罩宽高的一般
            let shadeWidthHalf = shadeDom.clientWidth / 2;
            let shadeHeightHalf = shadeDom.clientHeight / 2;
            // console.log(boxDom.offsetLeft)
            // console.log(boxDom)
            
            // 限制 xy的坐标点
            // 如果获取到x的坐标点比 box左侧距离+遮罩一般 还要小 就固定在左侧
            if (x < boxDom.offsetLeft + shadeWidthHalf) {
                x = boxDom.offsetLeft + shadeWidthHalf;
            }
            // 如果x 坐标 值大于box距离左侧的距离 + box的宽度 - 遮罩的一半
            if (x > boxDom.offsetLeft - shadeWidthHalf + boxDom.clientWidth) {
                x = boxDom.offsetLeft - shadeWidthHalf + boxDom.clientWidth;
            }

            if (y < boxDom.offsetTop + shadeHeightHalf) {
                y = boxDom.offsetTop + shadeHeightHalf;
            }
            if (y > boxDom.offsetTop - shadeHeightHalf + middleBoxDom.clientHeight) {
                y = boxDom.offsetTop - shadeHeightHalf + middleBoxDom.clientHeight;
            }
            // 由于遮罩定位是按照middleBox进行计算的 xy 坐标点是以浏览器左上角计算。所以需要减掉整个box盒子水平与垂直的距离 offsetLeft offsetTop获取到相对于上级元素的定位偏移量
            shadeDom.style.left = x - boxDom.offsetLeft - shadeWidthHalf + "px";
            shadeDom.style.top = y - boxDom.offsetTop - shadeHeightHalf + "px";

            //计算遮罩与中图的百分比
            let xBfb = shadeDom.offsetLeft / middleBoxDom.clientWidth;
            let yBfb = shadeDom.offsetTop / middleBoxDom.clientHeight;
            //计算大图的完整尺寸
            let bigBoxImgSize = getStyle(bigBoxDom, 'backgroundSize');
            //提取背景图片的宽高
            let bigBoxImgWidth = parseInt(bigBoxImgSize.split(" ")[0]);
            let bigBoxImgHeight = parseInt(bigBoxImgSize.split(" ")[1]);
            let xMove = bigBoxImgWidth * xBfb;
            let yMove = bigBoxImgHeight * yBfb;
            //设置posititon backgroundPosition 
            bigBoxDom.style.backgroundPosition = -xMove + 'px -' + yMove + 'px';
            bigBoxDom.style.backgroundPosition = -xMove + 'px -' + yMove + 'px'
            //显示大图
            bigBoxDom.style.display = 'block';
        }
    }
    //4.鼠标划出
    middleBoxDom.onmouseout = function () {
        //隐藏遮罩
        shadeDom.style.display = 'none';
        //隐藏大图
        bigBoxDom.style.display = 'none';
        //移动事件解绑
        middleBoxDom.onmousemove = null;
    }


    /**
 * 获取标签指定的的样式
 * @param {Document} elem 需要获取样式的元素的dom对象
 * @param {String} attr 获取样式的名称
 * @returns String
 */
    function getStyle(elem, attr) {
        if (window.getComputedStyle) {
            // 表示window下存在getComputedStyle属性 说明绝对是IE高版本
            return window.getComputedStyle(elem)[attr];
        }
        // 代码走到这里绝对可以证明是IE低版本
        return elem.currentStyle[attr];
    }

</script>